import React from 'react';
import { Grid } from '@material-ui/core';
import FriendItem from '@/component/FriendItem';
import FriendStore from '@/store/friend';
import { useStore } from 'reto';

const Friend: React.FC = () => {
  const friendModel = useStore(FriendStore);
  const friendListModel = friendModel.listModel;
  const friendList = friendListModel.data?.list;

  return (
    <Grid container spacing={3}>
      {friendList &&
        friendList.map(item => (
          <Grid item xs={12} sm={6} md={4} key={item.id}>
            <FriendItem
              avatar={item?.face}
              name={item?.name}
              sign={item?.sign}
              link={item?.link}
            />
          </Grid>
        ))}
    </Grid>
  );
};

export default Friend;
